<template>
  <div class="main">
    <navTop></navTop>
    <div class="contentboxset">
      <div class="breadBox" :style="screenWidth > 1400 ? 'width:1400px;' : 'width:1200px;min-width:1200px;'">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>作业</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/homework' }">作业管理</el-breadcrumb-item>
          <el-breadcrumb-item>作业详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="idenboxmain" :style="screenWidth > 1400 ? 'width:1400px;' : 'width:1200px;min-width:1200px;'">
      <div class="dtkanswerlist">
        <p>
          {{ $route.query.examtitle }}
          <!-- <el-select v-model="scanType" placeholder="" @change="scanchange" clearable>
                        <el-option
                            v-for="item in sbtype"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select> -->
        </p>
        <ul>
          <li>布置人数：{{ studenttotal }}</li>
          <li>已扫描数：{{ total }}</li>
          <li>
            未上传数：
            {{ notuploadtotal }}人
            <!-- <el-tooltip class="item" effect="dark" :content="notuploadSudent" placement="bottom-start" v-if="notuploadtotal!=0"> -->
            <i style="font-style: normal;color:#295CFF;display: inline-block;margin-left:10px;cursor: pointer;"
              @click="notuploadstuentishow = true" v-if="notuploadtotal != 0">查看名单</i>
            <!-- </el-tooltip> -->
          </li>
        </ul>
      </div>
      <div class="identistatusmodify">
        <div class="tychulititle">异常处理：<div v-if="sbstatus.paperCount === sbstatus.identifyCount"><i
              class="el-icon-success"></i>识别完成</div>
          <div v-else><i class="el-icon-loading"></i>识别中</div><span>/ 识别进度：{{ sbstatus.paperCount }}</span>
        </div>
        <ul class="tychuliul">
          <li @click="ycrouterlink('/homeabnormalexamnumber')">
            <h4>答题卡异常处理：{{ sbstatus.examNoExceptionCount }}</h4>
            <span>定位点异常、试卷异常、重复试卷、<br />未知考号、选科错误等问题</span>
          </li>
          <li @click="ycrouterlink('/homeoptionexception')">
            <h4>选项异常处理：{{ sbstatus.optionExceptionCount }}</h4>
            <span>客观题多涂、未涂、<br />置信度低等</span>
          </li>
          <li @click="ycrouterlink('/homeabnormalrating')">
            <h4>打分异常处理：{{ sbstatus.scoreExceptionCount }}</h4>
            <span>评阅教师给分多涂、未涂、<br />置信度低等情况</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="headerwidth" :style="screenWidth > 1400 ? 'width:1400px;' : 'width:1200px;min-width:1200px;'">
      <div class="searchlist">
        <div style="width:300px;display: flex;align-items: center;">
          <router-link :to="{
            path: '/studentscore',
            query: {
              subjectid: $route.query.subjectid,
              examid: $route.query.examid,
              examtitle: $route.query.examtitle,
              sujectname: $route.query.sujectname,
            }
          }" active-class="hover">原始成绩({{ studenttotalscore }})</router-link>
          <router-link :to="{
            path: '/homeidenificationrecord',
            query: {
              subjectid: $route.query.subjectid,
              examid: $route.query.examid,
              examtitle: $route.query.examtitle,
              sujectname: $route.query.sujectname,
            }
          }" active-class="hover">识别记录({{ total }})</router-link>
        </div>
      </div>
      <div class="overviewcontent">
        <div class="studentSearch">
          <el-input placeholder="准考证号" v-model="objquery.examNumber" @change="examNumber" clearable></el-input>
          <el-input placeholder="学生姓名" v-model="objquery.studentName" @change="studentName" clearable></el-input>
          <el-select v-model="objquery.batchNumber" placeholder="请选择批次" @change="batchNumber" clearable>
            <el-option v-for="item in batchlist" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
          <!-- <el-select v-model="objquery.examRoomNumbe" placeholder="选择考场" @change="examRoomNumber" clearable>
            <el-option v-for="item in examlist" :key="item" :label="item" :value="item">
            </el-option>
          </el-select> -->
          <el-select v-model="objqueryclassId" placeholder="选择班级" @change="classId" clearable>
            <el-option v-for="item in classlist" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-select v-model="objqueryrecognizeErrorCode" placeholder="异常状态" @change="recognizeErrorCode" clearable>
            <el-option v-for="item in errortypelist" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="tableContent" v-if="identificationlist.length > 0">
          <el-table class="custom-table" ref="multipleTable" :data="identificationlist" tooltip-effect="dark"
            style="width: 100%" :height="tableHeight" @selection-change="handleSelectionChange" stripe
            :header-cell-style="{ background: '#D8E4F0', color: '#2A303B', fontWeight: '500' }" row-key="id">
            <el-table-column type="selection" width="55" :reserve-selection="true">
            </el-table-column>
            <el-table-column label="批次" width="80">
              <template slot-scope="scope">{{ scope.row.batchNumber }}</template>
            </el-table-column>
            <el-table-column prop="serialNumber" label="流水号" width="80">
            </el-table-column>
            <el-table-column prop="studentName" label="姓名">
            </el-table-column>
            <el-table-column label="准考证号">
              <template slot-scope="scope">
                {{ scope.row.examNumber }}
              </template>
            </el-table-column>
            <el-table-column label="班级" width="60">
              <template slot-scope="scope">{{ scope.row.className }}</template>
            </el-table-column>
            <!-- <el-table-column
						  label="考场">
						  <template slot-scope="scope">{{ scope.row.examRoomNumber }}</template>
						</el-table-column>
						<el-table-column
						  label="座号"
						  width="60">
						  <template slot-scope="scope">{{ scope.row.seatNumber }}</template>
						</el-table-column> -->
            <!-- <el-table-column label="异常状态">
              <template slot-scope="scope">
                <span v-for="errornum in scope.row.exceptions" :key="errornum.id">{{
                  errornum.recognizeErrorCode == 1000 ? '试卷异常' : errornum.recognizeErrorCode == 1100 ? '定位点识别异常' :
                    errornum.recognizeErrorCode == 2000 ? '未知准考证号' : errornum.recognizeErrorCode == 2100 ? '无对应考生' :
                      errornum.recognizeErrorCode == 2200 ? '重复试卷' : errornum.recognizeErrorCode == 3000 ? '缺考' :
                        errornum.recognizeErrorCode == 4000 ? '单选多个答案' : errornum.recognizeErrorCode == 4100 ? '缺少选项' :
                          errornum.recognizeErrorCode == 6000 ? '打分异常' : '选科异常' }}</span>
              </template>
            </el-table-column> -->
            <el-table-column label="异常状态">
              <template slot-scope="scope">
                <span v-if="formatErrors(scope.row.exceptions)"  style="cursor: default;">
                  {{ formatErrors(scope.row.exceptions) }}
                </span>
              </template>
            </el-table-column>


            <el-table-column label="扫描结束时间">
              <template slot-scope="scope">{{ scope.row.createTime }}</template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="120">
              <template slot-scope="scope">
                <div style="display: flex;">
                  <!-- <el-button @click="handleClick(scope.row)" type="text" size="small" style="display: flex;align-items: center;"><img src="../../assets/image/school/edit.png" style="width:12px;margin-right:5px;" />查看答题卡</el-button> -->
                  <!-- <el-button v-if="scope.row.missingExam" @click="missanexam(scope.row.id)" type="text" size="small"
                    style="display: flex;align-items: center;"><img src="../../assets/image/school/edit.png"
                      style="width:12px;margin-right:5px;" />缺考</el-button> -->
                  <el-button @click="deletecard(scope.row.id)" type="text" size="small"
                    style="display: flex;align-items: center;color:#EC555A"><img src="../../assets/image/school/del.png"
                      style="width:12px;margin-right:5px;" />删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-else style="height:calc(100vh - 420px);position:relative">
          <empty></empty>
        </div>
      </div>
    </div>
    <div class="examfooter">
      <div class="examFootercontent" :style="screenWidth > 1400 ? 'width:1400px;;' : 'width:1200px;min-width:1200px;'">
        <div class="totaldata">
          <span>已选<i>{{ multipleSelection.length }}</i>项 / 共{{ total }}项</span>
          <em @click="batchdeletedata" style="background:#EC555A">批量删除</em>
          <!-- <em @click="batchmissexam" style="background:#EC555A">批量缺考</em> -->
          <!-- <em @click="$router.push('/recognitionresult')" style="background:#295CFF">识别结果</em> -->
        </div>
        <div>
          <el-pagination background :current-page="page" @current-change="handleCurrentChange"
            :page-sizes="[20, 50, 100]" @size-change="handleSizeChange" :page-size="pageSize"
            layout="sizes, prev, pager, next" :total="total">
          </el-pagination>
          <!-- <el-pagination
						background
						@current-change="handleCurrentChange"
						layout="prev, pager, next, jumper"
						:total="total">
					</el-pagination> -->
        </div>
      </div>
    </div>
    <!-- 未上传名单 -->
    <div class="notuploadStudent" v-if="notuploadstuentishow">
      <div class="notuploadStudentContent">
        <h3>未上传名单</h3>
        <div id="content-to-copy" class="contentset">{{ notuploadSudent }}</div>
        <div class="elbuttonbox">
          <!-- <el-button @click="copyDivContentToClipboard('content-to-copy')">复制</el-button> -->
          <el-button type="primary" @click="notuploadstuentishow = false">关闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navTop from "../../components/homework/headtop.vue"
import empty from "../../components/school/empty.vue"
import { get, post, del, put } from '../../request/api.js'
import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters(['getScreenWidth']),
    screenWidth() {
      return this.getScreenWidth;
    },
  },
  data() {
    return {
      sbtype: [
        {
          name: '允许扫描',
          id: 1
        },
        {
          name: '停止扫描',
          id: 2
        }
      ],
      scanType: '',
      identificationlist: [],
      page: 1,
      pageSize: 20,
      objquery: {
        examCourseId: 0,
        batchNumber: '',
        examRoomNumber: '',
        classId: '',
        recognizeErrorCode: '',
        examNumber: '',
        studentName: ''
      },
      multipleSelection: [],
      total: 0,
      errortypelist: [
        {
          name: '试卷异常',
          id: 1000
        },
        {
          name: '定位点识别异常',
          id: 1100
        },
        {
          name: '未知准考证号',
          id: 2000
        },
        {
          name: '无对应考生',
          id: 2100
        },
        {
          name: '重复试卷',
          id: 2200
        },
        {
          name: '缺考',
          id: 3000
        },
        {
          name: '单选多个答案',
          id: 4000
        },
        {
          name: '缺少选项',
          id: 4100
        },
        {
          name: '选科异常',
          id: 5000
        }
      ],
      classlist: [],
      examlist: [],
      objqueryclassId: '',
      objqueryrecognizeErrorCode: '',
      tableHeight: '',
      sbstatus: {},
      preogressstatus: '',
      batchlist: [],
      intervaltime: null,
      studentObj: {
        pageSize: 1,
        query: {
          examId: '',
          classIds: [],
          eamxNumber: '',
          studentName: '',
          gradeId: 0
        }
      },
      studenttotal: 0,
      notuploadtotal: 0,
      notuploadSudent: '',
      studenttotalscore: 0,
      scorelistobj: {
        page: 1,
        pageSize: 1,
        query: {
          examCourseId: 0,
          classId: 0,
          studentName: "",
          examNumber: ""
        }
      },
      intervaltime: null,
      notuploadstuentishow: false,
      timer: null
    }
  },
  mounted() {
    // this.examobjcontent = JSON.parse(sessionStorage.getItem('examInfo'))
    this.tableHeight = parseInt(document.documentElement.clientHeight - 480)
    this.identificationtab(this.$route.query.subjectid)
    this.classifytablist(this.$route.query.examid)
    this.examtablist(this.$route.query.examid)
    this.cardStatus()
    this.cardsmstatus()
    this.selectpclist()
    this.studentObjlist()
    this.notupload()
    this.getstudentlist()
    this.timer = setInterval(() => {
      this.godataload()
    }, 2000)
  },
  methods: {
    formatErrors(errors) {
      if (!errors || !errors.length) return ''; 
      return errors.map(errornum => {
        switch (errornum.recognizeErrorCode) {
          case 1000: return '试卷异常';
          case 1100: return '定位点识别异常';
          case 2000: return '未知准考证号';
          case 2100: return '无对应考生';
          case 2200: return '重复试卷';
          case 3000: return '缺考';
          case 4000: return '单选多个答案';
          case 4100: return '缺少选项';
          case 6000: return '打分异常';
          default: return '选科异常';
        }
      }).join('、');
    },
    // 轮训
    godataload() {
      let obj = {
        examCourseId: this.$route.query.subjectid,
      }
      get('/exampaper/updatestate', obj).then(res => {
        if (res.data > 0) {
          this.identificationtab(this.$route.query.subjectid)
          this.classifytablist(this.$route.query.examid)
          this.examtablist(this.$route.query.examid)
          this.cardStatus()
          this.cardsmstatus()
          this.selectpclist()
          this.studentObjlist()
          this.notupload()
          this.getstudentlist()
        }
      })
    },
    getstudentlist() {
      // alert('ddd')
      this.scorelistobj.query.examCourseId = this.$route.query.subjectid
      post('/score/scoredetails', this.scorelistobj)
        .then(res => {
          // //console.info(res)
          if (res.code == 200) {
            this.studenttotalscore = res.data.total
          } else {
            this.$message.error(res.message);
          }
        })
    },
    notupload() {
      this.objquery.examCourseId = this.$route.query.subjectid
      this.objquery.classId = 0
      this.objquery.recognizeErrorCode = 0
      let obj = {
        page: 1,
        pageSize: 10000,
        query: this.objquery
      }
      post('/exampaper/uploadlist', obj)
        .then(res => {
          if (res.code == 200) {
            // //console.info(res)
            this.notuploadSudent = this.formatClassStudents(res.data.items);
            this.notuploadtotal = res.data.total
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(error => {
          this.$message.error(error.message);
        })
    },
    formatClassStudents(students) {
      const classMap = students.reduce((acc, student) => {
        const className = student.className;
        if (!acc[className]) {
          acc[className] = [];
        }
        acc[className].push(student.studentName);
        return acc;
      }, {});

      return Object.entries(classMap)
        .map(([cls, names]) => `${cls}：${names.join('、')}`)
        .join('，');
    },
    // 获取学生列表
    studentObjlist() {
      this.studentObj.query.examId = this.$route.query.examid
      this.studentObj.query.classIds = this.setvalue ? [this.setvalue] : []
      this.studentObj.query.gradeId = this.gradeId ? this.gradeId : 0
      post('/examstudent/list', this.studentObj)
        .then(res => {
          if (res.code == 200) {
            this.studenttotal = res.data.total
          } else {
            this.$message.error(res.message);
          }

        })
        .catch(error => {
          this.$message.error(error.message);
        })
    },
    //跳转
    ycrouterlink(link) {
      let obj = {
        examCourseId: this.$route.query.subjectid
      }
      get('/scanpaperexception/exception', obj)
        .then(res => {
          // //console.info(res)
          if (res.code == 200) {
            this.sbstatus = res.data
            this.preogressstatus = ((res.data.identifyCount / res.data.paperCount) * 100).toFixed(2)
            if (link == '/homeabnormalexamnumber') {
              if (res.data.examNoExceptionCount != 0) {
                this.$router.push('/homeabnormalexamnumber?subjectid=' + this.$route.query.subjectid + '&examid=' + this.$route.query.examid + '&examtitle=' + this.$route.query.examtitle + '&sujectname=' + this.$route.query.sujectname)
              } else {
                this.$message.warning('当前没有要处理考号异常！')
              }
            } else if (link == '/homeoptionexception') {
              if (res.data.optionExceptionCount != 0) {
                this.$router.push('/homeoptionexception?subjectid=' + this.$route.query.subjectid + '&examid=' + this.$route.query.examid + '&examtitle=' + this.$route.query.examtitle + '&sujectname=' + this.$route.query.sujectname)
              } else {
                this.$message.warning('当前没有要处理选项异常！')
              }
            } else {
              if (res.data.scoreExceptionCount != 0) {
                this.$router.push('/homeabnormalrating?subjectid=' + this.$route.query.subjectid + '&examid=' + this.$route.query.examid + '&examtitle=' + this.$route.query.examtitle + '&sujectname=' + this.$route.query.sujectname)
              } else {
                this.$message.warning('当前没有要处理打分异常！')
              }
            }
          } else {
            this.$message.error(res.message);
          }
        })
    },
    // 选择批次
    selectpclist() {
      let obj = {
        examCourseId: this.$route.query.subjectid
      }
      get('/exampaper/batchlist', obj)
        .then(res => {
          if (res.code == 200) {
            this.batchlist = res.data
          } else {
            this.$message.error(res.message);
          }
        })
    },
    //获取答题卡扫描状态
    cardsmstatus() {
      let obj = {
        examCourseId: this.$route.query.subjectid
      }
      get('/scanpaperexception/exception', obj)
        .then(res => {
          // //console.info(res)
          if (res.code == 200) {
            this.sbstatus = res.data
            this.preogressstatus = ((res.data.identifyCount / res.data.paperCount) * 100).toFixed(2)
          } else {
            this.$message.error(res.message);
          }
        })
    },
    // 答题卡扫描状态
    cardStatus() {
      let obj = {
        examCourseId: this.$route.query.subjectid
      }
      get('/exampaper/state', obj)
        .then(res => {
          // //console.info(res)
          this.scanType = res.data == 0 ? '扫描未开始' : res.data == 3 ? '完成扫描' : res.data
        })
        .catch(error => {

        })
    },
    scanchange(val) {
      let obj = {
        examCourseId: this.$route.query.subjectid,
        status: val
      }
      get('/exam/updatestatus', obj)
        .then(res => {
          // //console.info(res)
        })
        .catch(error => {

        })
    },
    classifytablist(id) {
      get('/exampaper/classlist', { examId: id })
        .then(res => {
          if (res.code == 200) {
            // //console.info(res)
            this.classlist = res.data
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(error => {
          this.$message.error(error.message);
        })
    },
    examtablist(id) {
      get('/exampaper/roomlist', { examId: id })
        .then(res => {
          if (res.code == 200) {
            // //console.info(res)
            this.examlist = res.data
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(error => {
          this.$message.error(error.message);
        })
    },
    identificationtab(id) {
      this.objquery.examCourseId = id
      this.objquery.classId = this.objqueryclassId ? this.objqueryclassId : 0
      this.objquery.recognizeErrorCode = this.objqueryrecognizeErrorCode ? this.objqueryrecognizeErrorCode : 0
      let obj = {
        page: this.page,
        pageSize: this.pageSize,
        query: this.objquery
      }
      post('/exampaper/pagelist', obj)
        .then(res => {
          if (res.code == 200) {
            // //console.info(res)
            this.total = res.data.total
            this.identificationlist = res.data.items
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(error => {
          this.$message.error(error.message);
        })
    },
    batchNumber(val) {
      this.page = 1;
      this.objquery.batchNumber = val
      this.identificationtab(this.$route.query.subjectid)
    },
    examRoomNumber(val) {
      this.objquery.examRoomNumber = val
      this.identificationtab(this.$route.query.subjectid)
    },
    classId(val) {
      this.page = 1;
      this.objquery.classId = val
      this.identificationtab(this.$route.query.subjectid)
    },
    recognizeErrorCode(val) {
      this.page = 1;
      this.objquery.recognizeErrorCode = val
      this.identificationtab(this.$route.query.subjectid)
    },
    examNumber(val) {
      this.page = 1;
      this.objquery.examNumber = val
      this.identificationtab(this.$route.query.subjectid)
    },
    studentName(val) {
      this.page = 1;
      this.objquery.studentName = val
      this.identificationtab(this.$route.query.subjectid)
    },
    handleCurrentChange(val) {
      this.page = val
      this.identificationtab(this.$route.query.subjectid)
    },
    // 处理每页条数变化
    handleSizeChange(val) {
      this.pageSize = val
      this.identificationtab(this.$route.query.subjectid)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deletecard(id) {
      let ids = [id]
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        post('/exampaper/batchdelete', ids)
          .then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.identificationtab(this.$route.query.subjectid)
              this.identificationtab(this.$route.query.subjectid)
              this.classifytablist(this.$route.query.examid)
              this.examtablist(this.$route.query.examid)
              this.cardStatus()
              this.cardsmstatus()
              this.selectpclist()
              this.studentObjlist()
              this.notupload()
            } else {
              this.$message.error(res.message);
            }
          })
          .catch(error => {
            this.$message.error(error.message);
          })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //批量删除
    batchdeletedata() {
      // //console.info(this.multipleSelection.length)
      if (this.multipleSelection.length > 0) {
        let ids = this.multipleSelection.map(item => item.id)
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          post('/exampaper/batchdelete', ids)
            .then(res => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.identificationtab(this.$route.query.subjectid)
                this.identificationtab(this.$route.query.subjectid)
                this.classifytablist(this.$route.query.examid)
                this.examtablist(this.$route.query.examid)
                this.cardStatus()
                this.cardsmstatus()
                this.selectpclist()
                this.studentObjlist()
                this.notupload()
              } else {
                this.$message.error(res.message);
              }
            })
            .catch(error => {
              this.$message.error(error.message);
            })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        this.$message({
          type: 'warning',
          message: '请先选择要删除的内容'
        });
      }
    },
    missanexam(id) {
      let ids = [id]
      this.$confirm('批量缺考, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        post('/exampaper/cancelmissexam', ids)
          .then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '缺考成功!'
              });
              this.identificationtab(this.$route.query.subjectid)
            } else {
              this.$message.error(res.message);
            }
          })
          .catch(error => {
            this.$message.error(error.message);
          })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消缺考'
        });
      });
    },
    //批量缺考
    batchmissexam() {
      if (this.multipleSelection.length > 0) {
        let ids = this.multipleSelection.map(item => item.id);
        this.$confirm('批量缺考, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          post('/exampaper/batchmissexam', ids)
            .then(res => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '缺考成功!'
                });
                this.identificationtab(this.$route.query.subjectid)
              } else {
                this.$message.error(res.message);
              }
            })
            .catch(error => {
              this.$message.error(error.message);
            })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消缺考'
          });
        });
      } else {
        this.$message({
          type: 'warning',
          message: '请先选择要缺考的内容'
        });
      }
    }
  },
  components: { navTop, empty },
  beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  destroyed() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
}
</script>

<style scoped>
.main {
  width: 100vw;
  background: #F4F7FD;
}

/* .main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} */
.contentMain {
  width: auto;
  padding: 0 40px;
  margin: 0 auto;
  padding-bottom: 20px;
}

.contentboxset {
  background: #fff;
  height: 32px;
  border-top: solid 2px #F4F7FD
}

.breadBox {
  width: 1440px;
  margin: 0 auto;
  min-width: 1200px;
  line-height: 32px;
}


.headerwidth {
  width: 1440px;
  margin: 0 auto;
  ;
}

.el-breadcrumb {
  margin: 0 auto;
  line-height: 30px;
  font-size: 14px;
}

.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  color: #B3B8C2
}

.searchlist {
  box-sizing: border-box;
  width: auto;
  display: flex;
  justify-content: space-between;
  height: 54px;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 0 24px;
  align-items: center;
  margin: 14px 0px 0;
}

.searchlist {
  padding-left: 20px;
  display: flex;
  align-items: center;
  justify-content: left;
}

.searchlist a {
  display: block;
  color: #557292;
  font-size: 14px;
  width: 100px;
  text-align: center;
  position: relative;
  line-height: 52px;
}

.searchlist a:hover,
.searchlist a.hover {
  color: #295CFF;
}

.searchlist a:hover::after,
.searchlist a.hover::after {
  content: '';
  width: 24px;
  height: 4px;
  background: #295CFF;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.overviewcontent {
  background: #FFFFFF;
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  border-radius: 10px;
  width: auto;
  margin: 14px 0px 0;
}

.examInfo {
  display: flex;
  align-items: center;
}

.examInfo b {
  font-weight: normal;
  font-size: 14px;
  color: #333;
  position: relative;
  padding-right: 14px;
  margin-right: 14px;
}

.examInfo b i {
  font-style: normal;
  color: #8E96A4
}

.examInfo b::after {
  content: '';
  width: 1px;
  height: 8px;
  background: #DEE1E7;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.examInfo b:last-child::after {
  content: '';
  width: 1px;
  height: 8px;
  background: #fff;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.overvcontentTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
}

.overvcontentTop h3 {
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 15px;
}

.overvcontentTop span {
  width: 124px;
  height: 34px;
  background: #295CFF;
  border-radius: 10px;
  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
}

.tableContent {
  box-sizing: border-box;
  padding: 0 24px 30px;
  border-radius: 10px;
  height: calc(100vh - 495px);
  overflow-y: auto;
  overflow-x: hidden;
}

.tableContent::-webkit-scrollbar {
  width: 6px;
  background-color: #eee;
  border-radius: 10px;
}

.tableContent::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 10px;
}

.tableContent::-webkit-scrollbar-thumb {
  background: #619CF5;
  border-radius: 10px;
}

.tableContent table {
  border-radius: 10px;
  border: 1px solid rgba(216, 228, 240, 0.5);
}

.tableContent table tr th {
  font-size: 14px;
  font-weight: normal;
  background: #E8F0FA;
  height: 42px;
}

.tableContent table tr th:first-child {
  border-radius: 8px 0 0 0;
}

.tableContent table tr th:last-child {
  border-radius: 0 8px 0 0;
}

.tableContent table tr td {
  height: 42px;
  text-align: center;
  font-size: 14px;
  border-right: solid 1px rgba(216, 228, 240, 0.34);
}

.tableContent table tr td:last-child {
  border-right: none;
}

.tableContent table tr td i {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: #999
}

.tableContent table tr td em {
  display: block;
}

.tableContent table tr td span {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tableContent table tr td span em {
  font-size: 12px;
  font-style: normal;
}

.tableContent table tr td span::after {
  content: '';
  width: 43px;
  height: 1px;
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  background: #000;
}

.tableContent table tr td span.green {
  color: #288F41
}

.tableContent table tr td span.green::after {
  content: '';
  width: 43px;
  height: 1px;
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  background: #288F41;
}

.tableContent table tr td span.blue {
  color: #295CFF
}

.tableContent table tr td span.blue::after {
  content: '';
  width: 43px;
  height: 1px;
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  background: #295CFF;
}

.tableContent table tr td span.red {
  color: #EC555A
}

.tableContent table tr td span.red::after {
  content: '';
  width: 43px;
  height: 1px;
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  background: #EC555A;
}

.tableContent table tr td span.gray {
  color: #D8E4F0
}

.tableContent table tr td span.gray::after {
  content: '';
  width: 43px;
  height: 1px;
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  background: #D8E4F0;
}

.tableContent table tr:nth-child(3n) {
  background: #FAFAFB
}

.studentSearch {
  display: flex;
  padding: 24px 24px 24px;
  justify-content: left;
}

.studentSearch .el-select {
  width: 124px;
  margin-right: 24px;
}

.studentSearch>>>.el-input__inner {
  width: 124px;
  border-radius: 10px;
  height: 35px;
  font-size: 14px;
}

.studentSearch>>>.el-input__icon {
  line-height: 35px;
}

.el-input {
  width: auto;
  margin-right: 24px;
}

.studentSearch b {
  width: 124px;
  height: 34px;
  background: #295CFF;
  border-radius: 10px;
  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
}

.examfooter {
  width: 100%;
  height: 54px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100
}

.examFootercontent {
  width: 1440px;
  ;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.examFootercontent .totaldata {
  font-size: 14px;
  color: #557292;
  display: flex;
  justify-content: left;
  align-items: center;
}

.examFootercontent .totaldata i {
  display: inline-block;
  color: #295CFF;
  font-style: normal;
  line-height: 54px;
  padding: 0 3px;
}

.examFootercontent .totaldata em {
  font-style: normal;
  width: 96px;
  height: 34px;
  border-radius: 10px;
  line-height: 34px;
  background: #295CFF;
  text-align: center;
  color: #fff;
  margin-left: 14px;
  cursor: pointer;
}

.examFootercontent .totaldata em:last-child {
  background: #EC555A;
}

.examFootercontent .totaldata>>>.el-pager li.active {
  background-color: #295CFF
}

.scorered {
  font-size: 14px;
  color: #EC555A;
  padding: 24px 0;
}

.custom-table {
  width: 100%;
  border: 1px solid rgba(216, 228, 240, 0.34);
  border-radius: 10px;
  border-right: none;
  border-bottom: none;
  height: calc(100vh - 525px) !important;
}

/* 自定义表格内部元素的样式 */
.custom-table>>>.el-table__header-wrapper th {
  background-color: #E8F0FA;
  height: 42px;
  padding: 0;
  text-align: center;
  font-weight: normal
}

.custom-table>>>.el-table__row td {
  height: 42px;
  padding: 0;
  text-align: center;
  border-bottom: none;
  border-right: solid 1px rgba(216, 228, 240, 0.34);
}

.el-table .warning-row {
  background: #ffffff;
}

.el-table .success-row {
  background: #D8E4F0;
}

.examFootercontent>>>.el-pagination__jump {
  margin-left: 5px;
}

.examFootercontent>>>.el-pager {
  margin-top: 2px;
}

.examFootercontent>>>.el-pager li {
  margin: 0 3px;
  min-width: 25px;
  height: 25px;
  line-height: 25px
}

.examFootercontent>>>.el-pagination button {
  height: 25px;
  line-height: 25px;
  margin-top: 2px;
}

.answerlist {
  display: flex;
  align-items: center;
}

.smallsubject {
  width: 48px;
  height: 22px;
  font-size: 14px;
  text-align: center;
  line-height: 22px;
  border-radius: 6px;
  margin: 0 5px;
  background: rgba(162, 53, 113, 0.06);
  border: 1px solid rgba(162, 53, 113, 0.5);
  color: #A23571;
}

.answerlist li {
  width: 48px;
  height: 22px;
  font-size: 14px;
  text-align: center;
  line-height: 22px;
  border-radius: 6px;
  margin: 0 5px;
}

.answerlist li:nth-child(1) {
  background: rgba(101, 157, 113, 0.06);
  border: 1px solid rgba(101, 157, 113, 0.5);
  color: #659D71
}

.answerlist li:nth-child(2) {
  background: rgba(49, 121, 190, 0.06);
  border: 1px solid rgba(49, 121, 190, 0.5);
  color: #3179BE
}

.answerlist li:nth-child(3) {
  background: rgba(84, 62, 164, 0.06);
  border: 1px solid rgba(84, 62, 164, 0.5);
  color: #543EA4
}

.answerlist li:nth-child(4) {
  background: rgba(101, 157, 113, 0.06);
  border: 1px solid rgba(101, 120, 157, 0.5);
  color: #65789D
}

.addExamMain {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  z-index: 100;
}

.addExamContent {
  width: 584px;
  height: auto;
  background: #FFFFFF;
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  border-radius: 10px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-sizing: border-box;
  padding: 30px;
}

.addExamContent h3 {
  font-size: 18px;
  padding-bottom: 20px;
}

.groupbutton {
  display: flex;
  align-items: center;
  padding-top: 20px;
  justify-content: center;
}

.groupbutton>>>.el-button {
  width: 124px;
  height: 34px;
  background: #295CFF;
  border-radius: 10px;
  font-size: 14px;
  color: #FFFFFF;
  padding: 0;
}

.groupbutton>>>.el-button:last-child {
  background: #F2F6FB;
  border-radius: 10px;
  border: 1px solid #295CFF;
  color: #295CFF;
  margin-left: 24px;
}

.choosestudent {
  display: flex;
  align-items: center;
  padding: 10px 0 24px;
}

.choosestudent span {
  font-size: 14px;
  color: #557292;
}

.choosestudent>>>.el-input__inner {
  width: 436px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
}

.choosestudent>>>.el-input__icon {
  line-height: 34px;
}

.checkbox-group {
  font-size: 14px;
  color: #5B6371;
  margin-bottom: 20px;
}

.el-checkbox {
  margin-bottom: 12px;
}

.addExamContent ul li {
  display: flex;
  align-items: center;
  padding-bottom: 14px;
  font-size: 14px;
}

.addExamContent ul li span {
  font-size: 14px;
  width: 80px;
  color: #557292;
  text-align: right;
}

.addExamContent ul li p {
  position: relative;
}

.addExamContent ul li p em {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #C0C4CC;
  cursor: pointer;
}

.addExamContent ul li>>>.el-input__inner {
  width: 400px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
}

.inputBox {
  width: 400px;
}

.inputBox1 {
  width: 300px;
}

.addExamContent ul li div.inputBox1>>>.el-input__inner {
  width: 300px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
}

.addExamContent ul li>>>.el-range__icon {
  line-height: 27px;
}

.groupbutton {
  display: flex;
  align-items: center;
  padding-top: 20px;
}

.groupbutton>>>.el-button {
  width: 124px;
  height: 34px;
  background: #295CFF;
  border-radius: 10px;
  font-size: 14px;
  color: #FFFFFF;
  padding: 0;
}

.groupbutton>>>.el-button:last-child {
  background: #F2F6FB;
  border-radius: 10px;
  border: 1px solid #295CFF;
  color: #295CFF;
  margin-left: 24px;
}

.bcontentcolor {
  font-size: 14px;
  color: #295CFF;
  display: inline-block;
  margin-left: 20px;
  cursor: pointer;
}

.infosetcontentfont {
  color: #5B6371
}

.addExamContent ul li.infosetcontentfont span {
  width: auto;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #D8E4F0;
  color: #B3B8C2;
  font-size: 14px;
  text-align: left;
  line-height: 26px;
  padding: 0 16px 0 10px;
  margin-left: 10px;
}

.addExamContent ul li.infosetcontentfont i {
  font-style: normal;
  color: #295CFF;
  padding: 0 4px;
}

.addExamContent>>>.el-upload-dragger {
  width: 522px;
}

.uploadbox {
  width: 522px;
  height: 220px;
  position: relative;
}

.uploadbox a {
  position: absolute;
  right: 0;
  bottom: 10px;
  font-size: 14px;
  color: #295CFF;
}

.dtkanswerlist p {
  font-size: 18px;
  color: #000;
  font-weight: bold;
}

.dtkanswerlist p span {
  display: block;
  color: #295CFF;
  font-size: 14px;
}

.dtkanswerlist ul {
  font-size: 14px;
  color: #999;
  padding-top: 8px;
}

.dtkanswerlist ul li {
  padding-right: 50px;
  line-height: 1.8;
}

.dtkanswerlist>>>.el-input__inner {
  width: 124px;
  border-radius: 10px;
  height: 35px;
  font-size: 14px;
}

.dtkanswerlist>>>.el-input__icon {
  line-height: 35px;
}


/* 针对 Webkit 内核浏览器（如 Chrome, Safari） */
.el-table__body::-webkit-scrollbar {
  width: 6px;
  /* 滚动条宽度 */
  height: 6px;
  /* 滚动条高度 */
}

.el-table__body::-webkit-scrollbar-thumb {
  background: #619CF5;
  /* 滚动条颜色 */
  border-radius: 3px;
}

.el-table__body::-webkit-scrollbar-track {
  background: #619CF5;
  /* 滚动条轨道颜色 */
  border-radius: 3px;
}

/* 针对 Firefox */
.el-table__body {
  scrollbar-width: thin;
  /* 滚动条宽度 */
  scrollbar-color: #619CF5;
  /* 滚动条颜色和轨道颜色 */
}

.contentMain>>>.el-table--scrollable-y::-webkit-scrollbar {
  width: 4px !important;
  background-color: #619CF5;
  border-radius: 10px;
}

.contentMain>>>.el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #619CF5;
  border-radius: 10px;
}

.contentMain>>>.el-table--scrollable-y::-webkit-scrollbar-track {
  background-color: #619CF5;
  border-radius: 10px;
}

.contentMain>>>.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: #619CF5;
  border-radius: 10px;
}

.contentMain>>>.el-table--scrollable-y::-webkit-scrollbar-thumb {
  background: #619CF5;
  border-radius: 10px;
}

.contentMain>>>.el-table__fixed-right-patch {
  width: 0 !important
}

.contentMain>>>.el-table__fixed-right {
  right: 4px !important
}

.contentMain>>>.el-table .el-table__cell {
  padding: 9px 0;
}

.breadBox>>>.el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__inner.is-link {
  font-weight: normal
}

.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: bold
}

.idenboxmain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1440px;
  ;
  margin: 0 auto;
}

.dtkanswerlist {
  width: 335px;
  height: 164px;
  box-shadow: 0 4px 16px 0 #5572921a;
  border-radius: 10px;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 14px 24px;
  margin-top: 14px;
}

.identistatusmodify {
  box-sizing: border-box;
  width: calc(100% - 350px);
  height: 164px;
  box-shadow: 0 4px 16px 0 #5572921a;
  border-radius: 10px;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 14px 24px;
  margin-top: 14px;
}

.tychulititle {
  font-size: 18px;
  color: #2A303B;
  display: flex;
  align-items: center;
  font-weight: bold;
}

.tychulititle div {
  color: #295CFF;
  padding-left: 15px;
  padding-right: 4px;
  font-size: 16px;
  font-weight: 100;
}

.tychulititle span {
  color: #8E96A4;
  font-size: 16px;
  font-weight: 100;
}

.tychuliul {
  display: flex;
  align-items: center;
  padding-top: 14px;
}

.tychuliul li {
  box-sizing: border-box;
  width: 324px;
  height: 86px;
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
}

.tychuliul li:first-child {
  background: #ec555a0a;
  border: 1px solid #ec555a33;
}

.tychuliul li {
  background: #295cff0a;
  border: 1px solid #295cff33;
  margin-right: 14px;
}

.tychuliul li h4 {
  font-size: 16px;
  color: #333333;
  padding-bottom: 5px;
}

.tychuliul li span {
  display: block;
  color: #8E96A4;
  font-size: 12px;
  line-height: 18px;
}

.main>>>.el-table__body-wrapper::-webkit-scrollbar {
  width: 4px !important;
  background-color: #eee;
  border-radius: 10px;
}

/* 针对 Webkit 内核浏览器（如 Chrome, Safari） */
.el-table__body::-webkit-scrollbar {
  width: 4px;
  /* 滚动条宽度 */
  height: 4px;
  /* 滚动条高度 */
}

.el-table__body::-webkit-scrollbar-thumb {
  background: #b0b0b0;
  /* 滚动条颜色 */
  border-radius: 3px;
}

.el-table__body::-webkit-scrollbar-track {
  background: #e0e0e0;
  /* 滚动条轨道颜色 */
  border-radius: 3px;
}

/* 针对 Firefox */
.el-table__body {
  scrollbar-width: thin;
  /* 滚动条宽度 */
  scrollbar-color: #b0b0b0 #e0e0e0;
  /* 滚动条颜色和轨道颜色 */
}

.main>>>.el-table--scrollable-y::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
  background-color: #eee;
  border-radius: 10px;
}

.main>>>.el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 10px;
}

.main>>>.el-table--scrollable-y::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 10px;
}

.main>>>.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: #619CF5;
  border-radius: 10px;
}

.main>>>.el-table--scrollable-y::-webkit-scrollbar-thumb {
  background: #619CF5;
  border-radius: 10px;
}

.main>>>.el-table__fixed-right-patch {
  width: 0 !important
}

.main>>>.el-table__fixed-right {
  right: 4px !important
}

.notuploadStudent {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 100;
}

.notuploadStudentContent {
  width: 489px;
  max-height: 400px;
  background: #FFFFFF;
  box-shadow: 0 4px 16px 0 #5572921a;
  border-radius: 10px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 24px;
}

.notuploadStudentContent h3 {
  font-size: 18px;
  color: #2A303B;
}

.contentset {
  font-size: 16px;
  color: #5B6371;
  padding: 20px 0;
}

.elbuttonbox {
  display: flex;
  align-items: center;
}

.elbuttonbox>>>.el-button {
  width: 124px;
  height: 34px;
  border-radius: 10px 10px 10px 10px;
  padding: 0;
}

/* .elbuttonbox>>>.el-input__inner {
  line-height: 34px;
  font-size: 14px;
  color: #fff;
  padding: 0;
} */

/* .elbuttonbox >>> .el-button:first-child{
		background:#4985FF;
		border:solid 1px #4985FF;
		color:#fff;
		margin-right:15px;
	} */
/* .elbuttonbox>>>.el-button:last-child {
  background: #F5F6F8;
  border: solid 1px #B3B8C2;
  color: #B3B8C2
} */
</style>
<style>
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #295CFF
}
</style>